<template>
	<MyPage title="自定义海报信息" :isback="true">
		<view slot="gBody">
			<u-form :model="form" ref="uForm">
				<!-- <view class="map-view">
					<map 
						class="map-dom"
						:latitude="latitude"
						:longitude="longitude"
						:markers="covers"
					></map>
				</view> -->
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="顾问称呼" prop="name" :required="true">
						<u-input v-model="form.name" placeholder="请输入称呼" maxlength="18" :trim="true" />
						<u-radio-group solt="right" v-model="form.sex">
							<u-radio name="1">先生</u-radio>
							<u-radio name="2">女士</u-radio>
						</u-radio-group>
					</u-form-item>
					<view class="no-permission" v-if="!geren_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:0})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="联系方式" prop="tel" :required="true">
						<u-input v-model="form.tel" placeholder="请输入电话或手机" maxlength="15" :trim="true" />
					</u-form-item>
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!tel_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:0})">
									<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="公司名称" prop="company">
						<u-input v-model="form.company" placeholder="请输入公司简称" maxlength="15" :trim="true" />
					</u-form-item> 
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!gongsi_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:1})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="公司logo" prop="logo" class="upload-item">
						<u-upload :action="action1" :max-size="5*1024*1024" :size-type="['compressed']"
							:source-type="['album']" :limitType="['png', 'jpg', 'jpeg']" max-count="1" index="logo"
							@on-remove="onRemove" :file-list="logoImg"></u-upload>
						<view class="grey font22">显示在海报顶部和中间的logo，大小5M以内</view>
					</u-form-item> 
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!logo_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:1})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				<view class="view-box">
				
					<u-form-item borderBottom labelWidth="150" label="官网链接" prop="url">
						<u-input v-model="form.url" placeholder="请输入网址" maxlength="100" :trim="true" />
					</u-form-item>
				 
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!url_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:1})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view> 
				<view class="view-box"> 
					<u-form-item borderBottom labelWidth="150" label="公司地址" prop="address">
						<u-input v-model="form.address" placeholder="请输入公司地址" maxlength="120" :trim="true" />
					</u-form-item>
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!addr_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:1})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				<view class="view-box">
					<u-form-item borderBottom labelWidth="150" label="个性化签名" prop="autograph">
						<u-input v-model="form.autograph" placeholder="建议10个汉字以内!" maxlength="20" :trim="true" />
					</u-form-item>
				 
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!qianming_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:2})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				
				
				<view class="view-box">
				
					<view class="title">二维码</view>
					<view class="grey font22">显示在海报底部，建议为正方形二维码图片，大小5M以内</view>
					<view class="code-view">
						<u-upload class="code-list" :action="action2" :max-size="5*1024*1024"
							:size-type="['compressed']" :source-type="['album']" :limitType="['png', 'jpg', 'jpeg']"
							max-count="1" index="wechatCode" upload-text="微信二维码" @on-remove="onRemove"
							@on-success="onSuccess" :file-list="weixinImg"></u-upload>
						<u-upload class="code-list" :action="action3" :max-size="5*1024*1024"
							:size-type="['compressed']" :source-type="['album']" :limitType="['png', 'jpg', 'jpeg']"
							max-count="1" index="alipayCode" upload-text="支付宝二维码" @on-remove="onRemove"
							@on-success="onSuccess" :file-list="zhifubaoImg"></u-upload>
						<u-upload class="code-list" :action="action4" :max-size="5*1024*1024"
							:size-type="['compressed']" :source-type="['album']" :limitType="['png', 'jpg', 'jpeg']"
							max-count="1" index="tiktokCode" upload-text="抖音二维码" @on-remove="onRemove"
							@on-success="onSuccess" :file-list="douyinImg"></u-upload>
						<u-upload class="code-list" :action="action5" :max-size="5*1024*1024"
							:size-type="['compressed']" :source-type="['album']" :limitType="['png', 'jpg', 'jpeg']"
							max-count="1" index="blogCode" upload-text="微博二维码" @on-remove="onRemove"
							@on-success="onSuccess" :file-list="weiboImg"></u-upload>
					</view>
					<!-- 无权限加锁 -->
					<view class="no-permission" v-if="!ma_true">
						<view class="no-permission-view" @click="$utils.switchTab('/vip/vip',{index:2})">
							<u-icon size="60" name="lock-fill" color="#fff"></u-icon>
							<view class="no-permission-text">暂无权限<br />点击去开通会员！</view>
						</view>
					</view>
				</view>
				
				
				<view class="btn-view">
					<MyBtn title="保存" class="btn" @click="formSubmit"></MyBtn>
				</view>
			</u-form>
		</view>
	</MyPage>
</template>

<script>
	import mixin from "@/libs/mixin.js";
	import {
		savediy,
		getDiy
	} from '@/api/my.js'
	export default {
		mixins: [mixin],
	 
	 
	 
		data() {
			return {
				userType: 2,
				geren_true: false,
				tel_true: false,
				gongsi_true:false,
				logo_true:false,
				url_true:false,
				qianming_true:false,
				ma_true:false,
				addr_true:false,
				logoImg: [],
				weixinImg: [],
				zhifubaoImg: [],
				douyinImg: [],
				weiboImg: [],
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742
				}],
				action1: 'http://www.txzh.com.cn/api.php?act=uploadimg&type=logo&token=' + this.$store.state.app.token,
				action2: 'http://www.txzh.com.cn/api.php?act=uploadimg&type=weixin&token=' + this.$store.state.app.token,
				action3: 'http://www.txzh.com.cn/api.php?act=uploadimg&type=zhifubao&token=' + this.$store.state.app.token,
				action4: 'http://www.txzh.com.cn/api.php?act=uploadimg&type=douyin&token=' + this.$store.state.app.token,
				action5: 'http://www.txzh.com.cn/api.php?act=uploadimg&type=weibo&token=' + this.$store.state.app.token,

				form: {
					name: '', //个人信息
					sex: '1',
					tel: '',
					company: '', //公司信息
					logo: '',
					url: '',
					address: '',
					//wechat:'', //联系信息
					autograph: '',
					wechatCode: '',
					alipayCode: '',
					tiktokCode: '',
					blogCode: '',
					token: this.$store.state.app.token,
				},
				rules: {
					name: [{
						required: true,
						message: '请填写您的称呼',
						trigger: ['change', 'blur']
					}],
					tel: [{
							required: true,
							message: '请填写联系方式',
							trigger: ['change', 'blur']
						},
						{
							min: 8,
							message: '请填写正确的联系方式',
							trigger: 'change'
						}
					]
				}
			}
		},
		onLoad() {
			// 获取当前位置
			//this.getLocation();
			this.getData();
		},
		methods: {
			// 从手机上获取定位城市信息
			/*getLocation(){
				var self = this;
				uni.getLocation({
					type: 'gcj02',
					geocode: true,
					success: res=>{
						if( res.latitude ){
							this.latitude = this.covers[0].latitude = res.latitude;
							this.longitude = this.covers[0].longitude = res.longitude;	
						};
						if( res.address ){
							 
							this.form.address = res.address.province+res.address.city+res.address.district+res.address.street+res.address.streetNum+res.address.poiName;
						};
					},
					fail: ()=>{
						uni.showToast({
							title: '获取地址失败，请手动填写地址！',
							icon:'none'
						});
					}
				});
			},*/
			// 图片上传成功
			onSuccess(index, lists) {
				console.log(index, lists)
			},
			// 图片删除
			onRemove(index, lists) {
				console.log('删除成功！')
			},
			// 提交登录
			formSubmit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						savediy(this.form).then(res => {
							uni.showToast({
								title: res.list.msg,
								icon: 'none'
							})

						}).catch(err => {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						});
					}
				});
			},
			// 获取数据
			getData() {


				getDiy({}).then(res => {
					this.qx_list = res.list.qx;
					for (var i = 0; i < this.qx_list.length; i++) {
						if (this.qx_list[i] == 1) {
							this.geren_true = true;
						}
						if (this.qx_list[i] == 2) {
							this.tel_true = true;
						}
						if (this.qx_list[i] == 3) {
							this.gongsi_true = true;
						}
						if (this.qx_list[i] == 4) {
							this.logo_true = true;
						}
						if (this.qx_list[i] == 5) {
							this.url_true = true;
						}
						if (this.qx_list[i] == 6) {
							this.qianming_true = true;
						}
						if (this.qx_list[i] == 7) {
							this.ma_true = true;
						}
						if (this.qx_list[i] == 12) {
							this.addr_true = true;
						}

					}
			 
					this.userType = res.list.userType;
					this.form.address = res.list.address;
					this.form.name = res.list.guwen;
					this.form.sex = res.list.sex;
					this.form.tel = res.list.tel;
					this.form.url = res.list.url;
					this.form.company = res.list.company;
					this.form.autograph = res.list.autograph;
					this.form.wechat = res.list.wechat;
					if (res.list.logo) this.logoImg = res.list.logo;
					if (res.list.weixin) this.weixinImg = res.list.weixin;
					if (res.list.zhifubao) this.zhifubaoImg = res.list.zhifubao;
					if (res.list.douyin) this.douyinImg = res.list.douyin;
					if (res.list.weibo) this.weiboImg = res.list.weibo;
					return

				}).catch(err => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				});
				return


				uni.request({
					url: 'http://www.txzh.com.cn/api.php?app=Default&act=getDiy',
					method: 'POST',
					header: {
						'Content-Type': 'application/x-www-form-urlencoded',
						'X-Requested-With': 'xmlhttprequest'
					},
					data: {
						token: this.$store.state.app.token
					},
					success: res => {
						console.log(res)
						this.userType = res.data.list.userType;
						this.form.address = res.data.list.address;
						this.form.name = res.data.list.guwen;
						this.form.sex = res.data.list.sex;
						this.form.tel = res.data.list.tel;
						this.form.url = res.data.list.url;
						this.form.company = res.data.list.company;
						this.form.autograph = res.data.list.autograph;
						this.form.wechat = res.data.list.wechat;
						if (res.data.list.logo) this.logoImg = res.data.list.logo;
						if (res.data.list.weixin) this.weixinImg = res.data.list.weixin;
						if (res.data.list.zhifubao) this.zhifubaoImg = res.data.list.zhifubao;
						if (res.data.list.douyin) this.douyinImg = res.data.list.douyin;
						if (res.data.list.weibo) this.weiboImg = res.data.list.weibo;


						//console.log(res)
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}
</style>
<style lang="scss" scoped>
	.view-box {
		position: relative;

		background: #fff;
		padding: 10rpx 40rpx;


		.title {
			padding: 15rpx 0 5rpx;
		}

		.code-view {
			display: flex;
			flex-wrap: wrap;
			padding: 10rpx 0;
		}
	}

	.no-permission {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .2);
		text-align: center;
		color: #fff;
		font-size: 22rpx;
		line-height: 1.2em;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;

		.no-permission-view {
			.no-permission-text {
				margin-top: 8rpx;
			}
		}
	}

	.map-dom {
		width: 100%;
		height: 300rpx;
	}

	.upload-item /deep/ .u-form-item--right__content__slot[data-v-006449ec] {
		display: block;

		.grey {
			line-height: 1.4em;
		}
	}

	.btn-view {
		height: 180rpx;

		.btn {
			position: fixed;
			left: 4%;
			bottom: 30rpx;
			z-index: 9999;
			width: 92%;
		}
	}
</style>